<template>
  <div class="layout-container">
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item to="/forum" icon="comment-o">论坛</van-tabbar-item>
      <van-tabbar-item to="/herb-science" icon="smile-o"
        >草药科普</van-tabbar-item
      >
      <van-tabbar-item to="/tcm-encyclopedia" icon="info-o"
        >中医百科</van-tabbar-item
      >
      <van-tabbar-item to="/old-tcm-visit" icon="friends-o"
        >老中医寻访</van-tabbar-item
      >
      <van-tabbar-item to="/personal-center" icon="user-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

const router = useRouter();
</script>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.van-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #ebedf0;
}

.van-tabbar-item {
  transition: background-color 0.3s ease-in-out;
}

.van-tabbar-item--active {
  background-color: #f0f9eb;
  color: #07c160;
}

.van-tabbar-item--active .van-icon {
  color: #07c160;
}

.van-tabbar-item .van-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.van-tabbar-item__text {
  font-size: 12px;
  color: #646566;
}

.van-tabbar-item__text--active {
  color: #07c160;
}

.router-view {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 50px; /* 确保内容不会被导航栏遮挡 */
}
</style>